<template>
  <div class="app-container">
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_order" class="total-icon" />
            <div class="total-title">今日订单总数</div>
            <div class="total-value">￥{{ todayOrders }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_order" class="total-icon" />
            <div class="total-title">本月订单总数</div>
            <div class="total-value">￥{{ monthOrders }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_today_amount" class="total-icon" />
            <div class="total-title">今日销售总额</div>
            <div class="total-value">￥{{ todayMoney }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_today_amount" class="total-icon" />
            <div class="total-title">本月销售总额</div>
            <div class="total-value">￥{{ MonthMoney }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="un-handle-layout">
      <div class="layout-title">待处理事务</div>
      <div class="un-handle-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待付款订单</span>
              <span style="float: right" class="color-danger"
                >({{ nonPaymentOrders }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">已完成订单</span>
              <span style="float: right" class="color-danger"
                >({{ compeletedOrders }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待评价订单</span>
              <span style="float: right" class="color-danger"
                >({{ nonEvalOrders }})</span
              >
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待发货订单</span>
              <span style="float: right" class="color-danger"
                >({{ nonSendOrders }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">已发货订单</span>
              <span style="float: right" class="color-danger"
                >({{ sentOrders }})</span
              >
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">新缺货登记</span>
              <span style="float: right" class="color-danger"
                >({{ shortOfStock }})</span
              >
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待处理退款申请</span>
              <span style="float: right" class="color-danger">N/A</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待处理退货订单</span>
              <span style="float: right" class="color-danger">N/A</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">广告位即将到期</span>
              <span style="float: right" class="color-danger">N/A</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">商品总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  soldOut
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  onSale
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  shortOfStock
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  allPro
                }}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">已下架</el-col>
                <el-col :span="6" class="overview-item-title">已上架</el-col>
                <el-col :span="6" class="overview-item-title">库存紧张</el-col>
                <el-col :span="6" class="overview-item-title">全部商品</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">用户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  todayNewUser
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  yesterdayNewUser
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  monthNewUser
                }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{
                  allUsers
                }}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">用户总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import img_home_order from "@/assets/images/home_order.png";
import img_home_today_amount from "@/assets/images/home_today_amount.png";
import { mapGetters } from "vuex";

export default {
  name: "homeMS",
  data() {
    return {
      // pickerOptions: {
      //   shortcuts: [{
      //     text: '最近一周',
      //     onClick(picker) {
      //       const end = new Date();
      //       let start = new Date();
      //       end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
      //       picker.$emit('pick', [start, end]);
      //     }
      //   }, {
      //     text: '最近一月',
      //     onClick(picker) {
      //       const end = new Date();
      //       let start = new Date();
      //       end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
      //       picker.$emit('pick', [start, end]);
      //     }
      //   }]
      // },
      // orderCountDate: '',
      // chartSettings: {
      //   xAxisType: 'time',
      //   area:true,
      //   axisSite: { right: ['orderAmount']},
      // labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}},
      // chartData: {
      //   columns: [],
      //   rows: []
      // },
      // loading: false,
      // dataEmpty: false,
      img_home_order,
      img_home_today_amount,
      showDatas: {
        users: [],
        products: [],
        orders: [],
      },
    };
  },
  computed: {
    ...mapGetters(["isMechant", "isAdmin"]),
    // 今日订单总数
    todayOrders() {
      let orders = this.showDatas.orders.filter(
        (item) =>
          item.status >= 20 &&
          new Date().setHours(0, 0, 0, 0) ===
            new Date(item.createTime).setHours(0, 0, 0, 0)
      );
      return orders.length;
    },
    // 本月订单总数
    monthOrders() {
      let orders = this.showDatas.orders.filter(
        (item) =>
          item.status >= 20 &&
          new Date().getMonth() === new Date(item.createTime).getMonth()
      );
      return orders.length;
    },
    // 今日销售总额
    todayMoney() {
      let orders = this.showDatas.orders.filter(
        (item) =>
          item.status >= 20 &&
          new Date().setHours(0, 0, 0, 0) ===
            new Date(item.createTime).setHours(0, 0, 0, 0)
      );
      let total = orders.reduce(function (sum, order) {
        return sum + order.totalPrice;
      }, 0);
      return total;
    },
    // 本月销售总额
    MonthMoney() {
      let orders = this.showDatas.orders.filter(
        (item) =>
          item.status >= 20 &&
          new Date().getMonth() === new Date(item.createTime).getMonth()
      );
      let total = orders.reduce(function (sum, order) {
        return sum + order.totalPrice;
      }, 0);
      return total;
    },
    // 待付款订单
    nonPaymentOrders() {
      let orders = this.showDatas.orders.filter((item) => item.status === 10);
      return orders.length;
    },
    // 已完成订单
    compeletedOrders() {
      let orders = this.showDatas.orders.filter((item) => item.status === 50);
      return orders.length;
    },
    // 待评价订单
    nonEvalOrders() {
      let orders = this.showDatas.orders.filter((item) => item.status === 40);
      return orders.length;
    },
    // 待发货订单
    nonSendOrders() {
      let orders = this.showDatas.orders.filter((item) => item.status === 20);
      return orders.length;
    },
    // 已发货订单
    sentOrders() {
      let orders = this.showDatas.orders.filter((item) => item.status === 30);
      return orders.length;
    },
    // 下架商品数量
    soldOut() {
      return this.showDatas.products.filter((item) => item.status === 0).length;
    },
    // 在售商品数量
    onSale() {
      return this.showDatas.products.filter((item) => item.status === 1).length;
    },
    // 库存紧张
    shortOfStock() {
      return this.showDatas.products.filter((item) => item.stock <= 50).length;
    },
    // 全部商品
    allPro() {
      return this.showDatas.products.length;
    },
    // 今日新增用户
    todayNewUser() {
      let users = this.showDatas.users.filter(
        (item) =>
          new Date().setHours(0, 0, 0, 0) ===
          new Date(item.createTime).setHours(0, 0, 0, 0)
      );
      return users.length;
    },
    // 昨天新增用户
    yesterdayNewUser() {
      let users = this.showDatas.users.filter(
        (item) =>
          new Date(item.createTime).setHours(0, 0, 0, 0) -
            new Date().setHours(0, 0, 0, 0) ===
          -86400000
      );
      return users.length;
    },
    // 本月新增用户
    monthNewUser() {
      let users = this.showDatas.users.filter(
        (item) => new Date().getMonth() === new Date(item.createTime).getMonth()
      );
      return users.length;
    },
    // 全部用户
    allUsers() {
      return this.showDatas.users.length;
    },
  },
  created() {
    this.getData();
  },
  methods: {
    initOrderCountDate() {
      // let start = new Date();
      // start.setFullYear(2018);
      // start.setMonth(10);
      // start.setDate(1);
      // const end = new Date();
      // end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
      // this.orderCountDate=[start,end];
    },
    getData() {
      this.$api
        .getBackendData({ isAdmin: this.isAdmin, isMechant: this.isMechant })
        .then((res) => {
          if (res.data) {
            this.showDatas = res.data;
          } else {
            this.$message({
              showClose: true,
              message: "出错了！",
              type: "error",
            });
            console.log(res);
          }
        });
    },
  },
};
</script>

<style scoped>
.color-danger {
  color: red;
}
.app-container {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
}

.total-layout {
  margin-top: 20px;
}

.total-frame {
  border: 1px solid #dcdfe6;
  padding: 20px;
  height: 100px;
}

.total-icon {
  color: #409eff;
  width: 60px;
  height: 60px;
}

.total-title {
  position: relative;
  font-size: 16px;
  color: #909399;
  left: 70px;
  top: -50px;
}

.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 70px;
  top: -40px;
}

.un-handle-layout {
  margin-top: 20px;
  border: 1px solid #dcdfe6;
}

.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #f2f6fc;
  font-weight: bold;
}

.un-handle-content {
  padding: 20px 40px;
}

.un-handle-item {
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
}

.overview-layout {
  margin-top: 20px;
}

.overview-item-value {
  font-size: 24px;
  text-align: center;
}

.overview-item-title {
  margin-top: 10px;
  text-align: center;
}

.out-border {
  border: 1px solid #dcdfe6;
}
</style>
